<template>
    <div class="news-detail" v-if="JSON.stringify(detail) != '{}'">
        <div class="main">
            <div class="header">
                <h1 class="title">
                    {{ detail.title }}
                </h1>
                <div class="tools">
                    <div class="origin">来源：{{ detail.origin }}</div>
                    <div class="time">
                        时间：{{
                            formatDate(detail.createtime, "YYYY-MM-DD HH:mm")
                        }}
                    </div>
                    <div class="views">浏览量：{{ detail.views }}</div>
                </div>
            </div>
            <div class="body" v-html="detail.content"></div>
            <div class="footer">
                <div class="prev">
                    上一篇：
                    <NuxtLink
                        class="link"
                        v-if="detail.front"
                        :to="`/news/${detail.front.id}.html`"
                    >
                        {{ detail.front.title }}
                    </NuxtLink>
                    <div v-else>没有更多了</div>
                </div>
                <div class="next">
                    下一篇：
                    <NuxtLink
                        class="link"
                        v-if="detail.after"
                        :to="`/news/${detail.after.id}.html`"
                    >
                        {{ detail.after.title }}
                    </NuxtLink>
                    <div v-else>没有更多了</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useContent } from ".";
const { detail, GetDetail } = useContent();

onMounted(async () => {
    await nextTick();
    await GetDetail();

    useSeoMeta({
        title: detail.value.title + "-北京华锐云空间",
        description: detail.value.subtitle,
    });
});
</script>
<style>
.m-page .body img {
    width: 100% !important;
    height: auto !important;
}

.m-page .body p {
    margin-bottom: 1em;
    line-height: 1.5em;
}
</style>
<style lang="scss" scoped>
.news-detail {
    background-color: #f5f5f5;
    padding-top: 5px;

    .main {
        border-radius: 2px;

        .header {
            padding: 25px 15px 0;
            background-color: #fff;

            .title {
                width: 240px;
                margin: 0 auto;
                text-align: center;
                color: #333;
                font-weight: 600;
                font-size: 15px;
                line-height: 17px;
            }

            .tools {
                display: flex;
                justify-content: center;
                margin-top: 15px;
                font-size: 12px;
                color: #999;

                .origin,
                .time {
                    margin-right: 10px;
                }
            }
        }

        .body {
            background-color: #fff;
            padding: 19px 15px 34px;
            color: #666;
            line-height: 23px;
            font-size: 13px;
        }

        .footer {
            margin-left: 15px;
            padding-bottom: 15px;

            .prev,
            .next {
                display: flex;
                align-items: center;
                color: #666;
                font-size: 14px;
                cursor: pointer;
                margin-top: 15px;

                .link {
                    width: 250px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    text-decoration: none;
                    color: #000;

                    &:hover {
                        color: #5085fb;
                        text-decoration: underline;
                    }

                    &:active {
                        background: none;
                    }
                }
            }
        }
    }
}
</style>
